<template>
    <div class="sdelivery">
        <div class="sdetitle">
            <el-row :gutter="20" class="sdet">
                <el-col :span="24">
                    <div class="grid-content bg-purple">

                        <el-form :model="taskForm">
                            <el-form-item label="时间段选择：">
                                <el-date-picker
                                        v-model="datavalue"
                                        type="datetimerange"
                                        format="yyyy-MM-ddHH:mm:ss"
                                        value-format="yyyy-MM-ddHH:mm:ss"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        size="medium"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-form>

                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="sdet">
                <el-col :span="24">
                    <div class="grid-content bg-purple" id="sdebtn">
                        <el-button type="primary" style="background-color: #099FB8" @click="fsearch">查询</el-button>
                    </div>
                </el-col>
            </el-row>
            <!-- <el-row :gutter="20" class="sdet" >
                 <el-col :span="24">
                     <div class="grid-content bg-purple" id="sdetcheck">
                         <el-checkbox v-model="checked">按商品合并</el-checkbox>
                     </div>
                 </el-col>
             </el-row>
             <el-row :gutter="20" class="sdet">
                 <el-col :span="24">
                     <div class="grid-content bg-purple">
                         <span class="sdet1">选择商品</span>
                         <el-radio v-model="radioValue" label="名称">名称</el-radio>
                         <el-radio v-model="radioValue" label="类别">类别</el-radio>
                     </div>
                 </el-col>
             </el-row>
             <el-row :gutter="20" class="sdet">
                 <el-col :span="7">
                     <div class="grid-content bg-purple" id="sdeinput">
                         <el-input v-model="inputValue" placeholder="商品名称"></el-input>
                     </div>
                 </el-col>
                 <el-col :span="17">
                     <div class="grid-content bg-purple">

                     </div>
                 </el-col>
             </el-row>
             <el-row :gutter="20" class="sdet">
                 <el-col :span="24">
                     <div class="grid-content bg-purple" id="sdebtn">
                         <el-button type="primary" style="background-color: #099FB8" @click="fsearch">查询</el-button>
                     </div>
                 </el-col>
             </el-row>-->
        </div>
        <div class="sdeallnum">
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <h6>发货单数</h6>
                        <span>{{deliveryOrderNumber}}</span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <h6>发货商品数</h6>
                        <span>{{deliveryGoodsNumber}}</span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <h6>发货金额</h6>
                        <span>￥{{deliveryAmount}}</span>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="sordertable">
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <el-table
                                :cell-style="rowClass"
                                :header-cell-style="headClass"
                                border
                                :data="orderDetailsList"
                                style="width: 100%">
                            <!-- <el-table-column
                                     label="流水号"
                                     width="200">
                                 <template slot-scope="scope">
                                     <span style="margin-left: 10px">{{ scope.row.orderMainId}}</span>
                                 </template>
                             </el-table-column>-->
                            <el-table-column
                                    prop="orderMainId"
                                    label="流水号"
                            >
                            </el-table-column>
                            <!-- <el-table-column
                                     label="商品"
                                     width="250">
                                 <template slot-scope="scope">
                                     {{scope.row.goodsName}}
                                 </template>
                             </el-table-column>-->
                            <el-table-column
                                    prop="goodsName"
                                    label="商品"
                            >
                            </el-table-column>
                            <!-- <el-table-column
                                     label="发货时间"
                                     width="250">
                                 <template slot-scope="scope">
                                     {{ scope.row.deliveryTime}}
                                 </template>
                             </el-table-column>-->
                            <el-table-column
                                    prop="deliveryTime"
                                    label="发货时间"
                            >
                            </el-table-column>
                            <!-- <el-table-column
                                     label="订购数量"
                                     width="200">
                                 <template slot-scope="scope">
                                     {{ scope.row.goodsNumber}}
                                 </template>
                             </el-table-column>-->
                            <el-table-column
                                    prop="goodsNumber"
                                    label="订购数量"
                            >
                            </el-table-column>
                            <!-- <el-table-column
                                     label="已发货数量"
                                     width="200">
                                 <template slot-scope="scope">
                                     {{ scope.row.deliveryNumber}}
                                 </template>
                             </el-table-column>-->
                            <el-table-column
                                    prop="deliveryNumber"
                                    label="已发货数量"
                            >
                            </el-table-column>
                            <!-- <el-table-column
                                     label="已发货商品金额"
                             >
                                 <template slot-scope="scope">
                                     {{ scope.row.deliveryAmount}}
                                 </template>
                             </el-table-column>-->
                            <el-table-column
                                    prop="deliveryAmount"
                                    label="已发货商品金额"
                            >
                            </el-table-column>
                        </el-table>
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-pagination
                background
                layout="prev, pager, next"
                :page-size="5"
                :pager-count="7"
                :total="20"
                @current-change="changePage"
                :current-page="currentPage">
        </el-pagination>
        <div class="shuoming">
            统计说明：1.出库发货对账数据最早从2015-06-12 00:00 开始统计，之前数据暂不提供    2.作废的订/退货单不计入统计    3.运费不计入统计
        </div>
    </div>
</template>

<script>
    import {mapActions,mapState} from 'vuex'

    export default {
        name: "StatisticDelivery",
        data(){
            return{
                taskForm: {
                    startTime: null,
                    endTime: null
                },
                checked:false,
                currentPage:1,
                /* deliveryOrderNumber:'',
                 deliveryGoodsNumber:'',
                 deliveryAmount:'',*/
                /* orderDetailsList:[{
                     orderMainId: '000001',
                     goodsName:'黑人牙膏',
                     deliveryTime: '2020-03-12',
                     goodsNumber:'10笔',
                     deliveryNumber:'8笔',
                     deliveryAmount:'￥21.00元',
                 }],*//*{
                    orderMainId: '000002',
                    goodsName:'黑人牙膏',
                    deliveryTime: '2020-03-12',
                    goodsNumber:'10笔',
                    deliveryNumber:'8笔',
                    deliveryAmount:'￥21.00元',
                }, {
                    orderMainId: '000003',
                    goodsName:'黑人牙膏',
                    deliveryTime: '2020-03-12',
                    goodsNumber:'10笔',
                    deliveryNumber:'8笔',
                    deliveryAmount:'￥21.00元',
                }, {
                    orderMainId: '000004',
                    goodsName:'黑人牙膏',
                    deliveryTime: '2020-03-12',
                    goodsNumber:'10笔',
                    deliveryNumber:'8笔',
                    modeliveryAmountey:'￥21.00元',
                },{
                    orderMainId: '000005',
                    goodsName:'黑人牙膏',
                    deliveryTime: '2020-03-12',
                    goodsNumber:'10笔',
                    deliveryNumber:'8笔',
                    mdeliveryAmountoney:'￥21.00元',
                }*/
            }
        },
        computed:{
            orderDetailsList(){
                return this.$store.state.StatisticDelivery.orderDetailsList
            },
            deliveryOrderNumber(){
                return this.$store.state.StatisticDelivery.deliveryOrderNumber
            },
            deliveryGoodsNumber(){
                return this.$store.state.StatisticDelivery.deliveryGoodsNumber
            },
            deliveryAmount(){
                return this.$store.state.StatisticDelivery.deliveryAmount
            },
            /*  tableData(){
                  console.log(this.$store.state.StatisticDelivery.tableData)
                  return this.$store.state.StatisticDelivery.tableData
              },*/

            datavalue: {
                get() {
                    if (this.taskForm.startTime && this.taskForm.endTime) {
                        return [this.taskForm.startTime, this.taskForm.endTime]
                    } else {
                        return []
                    }
                },
                set(v) {
                    console.log(v)
                    this.taskForm.startTime = v[0]
                    this.taskForm.endTime = v[1]
                }
            }

        },
        methods: {
            ...mapActions(["getDeloveryStatisticData"]),
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            // 表头样式设置
            headClass () {
                return 'text-align: center;background:#F5F6F7;'
            },
            // 表格样式设置
            rowClass () {
                return 'text-align: center;'
            },
            changePage(val){
                this.currentPage=val
            },
            fsearch(){
                let obj={
                    clientId:this.$store.state.user.clientId,
                    startTime:this.taskForm.startTime,
                    endTime:this.taskForm.endTime
                }
                console.log(obj)
                if (this.taskForm.startTime && this.taskForm.endTime) {
                    this.getDeloveryStatisticData(obj)


                }else {
                    this.$message({
                        message: '警告，请选择时间',
                        type: 'warning'
                    });
                }

            }
        },
        /*created(){
            this.getDeloveryStatisticData()
        }*/
    }
</script>

<style scoped>
    .sdelivery{
        margin: 20px 0;
    }
    .sdet{
        margin: 20px 0;
    }
    .sdet1{
        color: #606266;
        font-size: 14px;
        margin: 0 10px;
    }
    #sdetcheck{
        margin-left: 80px;
    }
    #sdeinput{
        margin-left: 80px;
    }
    #sdebtn{
        margin-left: 80px;
    }
    .sdeallnum{
        border-top: 2px solid #099FB8;
        text-align: center;
        margin-bottom: 10px;
    }
    .el-pagination{
        text-align: center;
        margin-top: 20px;
    }
    .shuoming{
        margin-top: 10px;
        font-size: 12px;
        color: #99a9bf;
    }
</style>